import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:smart_shop/page/order/list.dart';

class Order extends StatefulWidget {
  const Order({super.key});

  @override
  _OrderState createState() => _OrderState();
}

class _OrderState extends State<Order>
    with AutomaticKeepAliveClientMixin, SingleTickerProviderStateMixin {
  late TabController tabController;

  late List<Widget> containers = [];

  List<BadgeTab> tabs = [
    BadgeTab(text: '待接单'),
    BadgeTab(text: '进行中'),
    BadgeTab(text: '已完成'),
    BadgeTab(text: '异常单')
  ];

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: tabs.length, vsync: this);
    for (var i = 0; i < 100; i++) {
      containers.add(createContainer(i));
    }
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        title: const Text('北海智慧商圈',
            style: TextStyle(
                fontSize: 20,
                fontFamily: 'PingFangSC-Regular',
                color: Colors.white,
                fontWeight: FontWeight.normal)),
        centerTitle: true,
        flexibleSpace: Container(
          decoration: const BoxDecoration(
              gradient: LinearGradient(colors: [
            Color.fromRGBO(255, 191, 67, 1),
            Color.fromRGBO(235, 175, 85, 1)
          ])),
        ),
        primary: true,
      ),
      body: Flex(
        direction: Axis.vertical,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            color: Colors.white,
            child: BrnTabBar(
              tabs: tabs,
              tabHeight: 50.0,
              indicatorColor: Colors.white,
              indicatorWeight: 3,
              indicatorWidth: 54,
              controller: tabController,
              unselectedLabelStyle: const TextStyle(
                  fontSize: 18,
                  fontFamily: 'Source Han Sans CN',
                  fontWeight: FontWeight.w500,
                  color: Color.fromRGBO(149, 149, 149, 1)),
              labelStyle: const TextStyle(
                fontSize: 18,
                fontFamily: 'Source Han Sans CN',
                fontWeight: FontWeight.w500,
                color: Color.fromRGBO(73, 135, 255, 1),
              ),
              onTap: (state, index) {},
            ),
          ),
          Expanded(
            flex: 1,
            child: createdScrollbar(context),
          ),
        ],
      ),
    );
  }

  Scrollbar createdScrollbar(context) {
    return Scrollbar(
      child: SingleChildScrollView(
        physics: const BouncingScrollPhysics(),
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(
            children: containers,
          ),
        ),
      ),
    );
  }

  GestureDetector createContainer(int index) {
    return GestureDetector(
      onTap: () {
        Navigator.of(context).push(MaterialPageRoute(builder: (context) {
          return OrderList(index);
        }));
      },
      child: Container(
        margin: const EdgeInsets.only(bottom: 10),
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(8)),
        child: Column(
          textDirection: TextDirection.ltr,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: const [
                Text(
                  '【家政服务】',
                  textAlign: TextAlign.left,
                  textDirection: TextDirection.ltr,
                  style: TextStyle(
                      fontSize: 14,
                      fontFamily: 'PingFangSC-Medium',
                      fontWeight: FontWeight.w500,
                      color: Color.fromRGBO(36, 36, 44, 1)),
                ),
                Text(
                  '越亚·天赐良园',
                  textAlign: TextAlign.left,
                  textDirection: TextDirection.ltr,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      fontSize: 14,
                      fontFamily: 'PingFangSC-Medium',
                      fontWeight: FontWeight.w500,
                      color: Color.fromRGBO(140, 140, 154, 1)),
                )
              ],
            ),
            Container(
              margin: const EdgeInsets.only(top: 10),
              child: const Text(
                '2022-08-07 12:00:55',
                textAlign: TextAlign.left,
                textDirection: TextDirection.ltr,
                style: TextStyle(
                    fontSize: 14,
                    fontFamily: 'PingFangSC-Medium',
                    fontWeight: FontWeight.w500,
                    color: Color.fromRGBO(140, 140, 154, 1)),
              ),
            )
          ],
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}
